package com.cc.openeye.dynamic.kuikly

import com.cc.openeye.dynamic.kuikly.follow.FollowView
import com.cc.openeye.dynamic.kuikly.recommend.RecommendView
import com.tencent.kuikly.core.pager.Pager
import com.tencent.kuikly.core.annotations.Page
import com.tencent.kuikly.core.base.Color
import com.tencent.kuikly.core.base.ViewBuilder
import com.tencent.kuikly.core.base.ViewRef
import com.tencent.kuikly.core.base.attr.ImageUri
import com.tencent.kuikly.core.directives.vfor
import com.tencent.kuikly.core.layout.FlexAlign
import com.tencent.kuikly.core.module.RouterModule
import com.tencent.kuikly.core.reactive.handler.observable
import com.tencent.kuikly.core.views.Image
import com.tencent.kuikly.core.views.PageList
import com.tencent.kuikly.core.views.PageListView
import com.tencent.kuikly.core.views.ScrollParams
import com.tencent.kuikly.core.views.TabItem
import com.tencent.kuikly.core.views.Tabs
import com.tencent.kuikly.core.views.Text
import com.tencent.kuikly.core.views.View

@Page("KuiklyDynamicPage")
internal class KuiklyDynamicPage : Pager() {

    private val kuiklyDynamicViewModel = KuiklyDynamicViewModel(this)

    private var tabHeaderWidth by observable(0f)

    private var scrollParams: ScrollParams? by observable(null)

    private var pageListViewRef: ViewRef<PageListView<*, *>>? = null

    override fun body(): ViewBuilder {
        val ctx = this
        return {
            attr {
                paddingTop(pagerData.statusBarHeight)
                flex(1f)
            }
            ctx.buildTabs().invoke(ctx)
            ctx.buildPageList().invoke(ctx)
        }
    }


    private fun buildTabs(): ViewBuilder {
        val ctx = this
        return {
            Tabs {
                attr {
                    height(45f)
                    width(ctx.tabHeaderWidth)
                    alignSelf(FlexAlign.CENTER)
                    indicatorInTabItem {

                        View {
                            attr {
                                height(3f)
                                absolutePosition(left = 0f, right = 2f, bottom = 5f)
                                borderRadius(2f)
                                alignItems(FlexAlign.CENTER)
                            }

                            View {
                                attr {
                                    height(3f)
                                    width(10f)
                                    borderRadius(2f)
                                    backgroundColor(0xff333333)
                                }
                            }
                        }
                    }
                    ctx.scrollParams?.also {
                        scrollParams(it)
                    }
                }

                event {
                    contentSizeChanged { width, _ ->
                        ctx.tabHeaderWidth = width
                    }


                }

                ctx.kuiklyDynamicViewModel.tabTitleList.forEachIndexed { index, tabInfoEntity ->
                    TabItem { state ->
                        attr {
                            marginLeft(10f)
                            marginRight(10f)
                            allCenter()
                        }
                        event {
                            click {
                                ctx.pageListViewRef?.view?.scrollToPageIndex(index, true)
                            }
                        }
                        Text {
                            attr {
                                text(tabInfoEntity.title)
                                fontSize(15f)
                                if (state.selected) {
                                    fontWeightBold()
                                    color(0xff333333)
                                } else {
                                    color(0xffaaaaaa)
                                }
                            }
                        }
                    }
                }


            }
        }
    }

    private fun buildPageList(): ViewBuilder {
        val ctx = this
        return {
            PageList {
                ref {
                    ctx.pageListViewRef = it
                }

                attr {
                    flex(1f)
                    flexDirectionRow()
                    showScrollerIndicator(false)

                }

                event {
                    scroll {
                        ctx.scrollParams = it
                    }
                }

                RecommendView {

                }

                FollowView {

                }


            }
        }
    }
}